<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>多页列表</title>

<link href="/css/ecalendar.css" type="text/css" rel="stylesheet">
<link href="/css/vendor/common.css" type="text/css" rel="stylesheet">
<link href="/css/vendor/page-control.css" rel="stylesheet" type="text/css">
<link href="/css/vendor/cmp-controls.less" type="text/css" rel="stylesheet/less">
<link href="/css/vendor/common-grid.less" rel="stylesheet/less" type="text/css">
<!--<link href="/css/vendor/multi-page-list.less" type="text/css" rel="stylesheet/less">-->
<script src="/js/less.min.js"></script>
</head>

<body>
    <div class="page-mask-container">
        <div class="multi-page-list">
            <p class="main-title">人员选择</p>
            <div class="condition row clearfix">
                <div class="col-md-4 col-sm-6">
                    <table>
                        <tr><th>server_id:</th><td><input type="text" value="JMIWUD"></td></tr>
                        <tr><th>用户昵称:</th><td><input type="text" value="JMIWUD"></td></tr>
                        <tr><th>手机号:</th><td><input type="text" value="JMIWUD"></td></tr>
                    </table>
                </div>
                <div class="col-md-4 col-sm-6">
                    <table>
                        <tr><th>飞机型号:</th><td><select><option>F1000</option><option>F200</option><option>F300</option></select></td></tr>
                        <tr><th>飞机序列号:</th><td><input type="text" value="18138288888"></td></tr>
                        <tr><th>飞机公里数:</th><td><input type="text" value="18138288888"></td></tr>
                    </table>
                </div>
                <div class="col-md-4 col-sm-6">
                    <table>
                        <tr><th>飞行时间:</th><td><input type="text" value="18138288888"></td></tr>
                        <tr>
                            <th>飞行时间:</th>
                            <td><input data-attr="date">-<input data-attr="date" class="end"></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div class="btn-0 button" style="width: 60%;">查 询</div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <div class="list-wrap">
                <div class="table-title-wrap">
                    <table class="title" cellpadding="0" cellspacing="0" border="0" bordercolor="#d8d8d8">
                        <tr>
                            <!-- 说明: selected属性使排序图片一直显示 sort属性设置排序方式，默认为降序desc  -->
                            <th class="width-200">昵称<img class="sort-icon" selected sort="asc"></th>
                            <th class="width-ud" style="width: 160px; min-width: 160px;">邮箱<img class="sort-icon" sort="desc"></th>
                            <th class="width-ud" style="width: 160px; min-width: 160px;">手机号<img class="sort-icon"></th>
                            <th class="width-150">公司<img class="sort-icon"></th>
                            <th class="width-100">省<img class="sort-icon"></th>
                            <!-- 预定义宽度类 width-s width-m width-b width-ud width-50 width-150 width-250 width-350 width-400 -->
                            <th class="width-100">市<img class="sort-icon"></th>
                            <!-- 自定义宽度需要 添加类width-ud 然后定义width和min-width的大小 -->
                            <th class="width-100">操作</th>
                        </tr>
                    </table>
                </div>
                <div class="table-data-wrap">
                    <table id="project-data-table" class="data" cellpadding="0" cellspacing="0" border="0" bordercolor="#d8d8d8">
                        <tr>
                            <td class="width-200">北京测绘</td>
                            <td class="width-ud" style="width: 160px; min-width: 160px;">2017-01-20 19:21:00</td>
                            <td class="width-ud" style="width: 160px; min-width: 160px;">2017-01-20 19:21:00</td>
                            <td class="width-150">深圳飞马</td>
                            <td class="width-100">广东省</td>
                            <td class="width-100">深圳市</td>
                            <td class="width-100"><span class="action button" onClick="dispatchMissionM.clickUserItemAction()">选择</span></td>
                        </tr>
                        <tr>
                            <td class="width-200">北京测绘</td>
                            <td class="width-ud" style="width: 160px; min-width: 160px;">2017-01-20 19:21:00</td>
                            <td class="width-ud" style="width: 160px; min-width: 160px;">2017-01-20 19:21:00</td>
                            <td class="width-150">深圳飞马</td>
                            <td class="width-100">广东省</td>
                            <td class="width-100">深圳市</td>
                            <td class="width-100"><span class="action button" onClick="dispatchMissionM.clickUserItemAction()">选择</span></td>
                        </tr>
                        <tr>
                            <td class="width-200">北京测绘</td>
                            <td class="width-ud" style="width: 160px; min-width: 160px;">2017-01-20 19:21:00</td>
                            <td class="width-ud" style="width: 160px; min-width: 160px;">2017-01-20 19:21:00</td>
                            <td class="width-150">深圳飞马</td>
                            <td class="width-100">广东省</td>
                            <td class="width-100">深圳市</td>
                            <td class="width-100"><span class="action button" onClick="dispatchMissionM.clickUserItemAction()">选择</span></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="page-control-container"></div>
        </div> <!-- .multi-page-list -->
    </div> <!-- .page-mask-container -->
</body>

<script src="/js/jquery.min.js"></script>
<script src="/js/Ecalendar.jquery.min.js"></script>
<script src="/js/vendor/common.js"></script>
<script src="/js/vendor/cmp-controls.js"></script>
<script src="/js/vendor/page-control.js"></script>
<script>
    // 监听滚动事件，数据横向滚动的时候标题也跟着滚动
    $(".multi-page-list .list-wrap .table-data-wrap").scroll(function() {
        $(this).siblings(".table-title-wrap").css("right", this.scrollLeft);
    });
    
    var pageControl = new PageControl(".multi-page-list .page-control-container", 100, 1000);
    pageControl.refresh();
    pageControl.pageDidChanged = function(page) {
        console.log("人员选择 页面改变了  " + page);
    };
    
        DataAttrBinder.init();
</script>

